<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="relext.css" />
		<link rel="stylesheet" type="text/css" href="XQYM.css" />
	</head>
	<body>
		<div class="banner-one" id="Img">
			<input type="button" id="btn1" value="<" />
			<input type="button" id="btn2" value=">" />
			<ul>
				<li></li>
				<li></li>
			</ul>
			<div id="mask">

			</div>
		</div>
		<div id="big-box">

		</div>
		<!-- 价格详情 -->
		<div class="op">
			<p class="op1">朵朵情歌</p>
			<p class="op2">199.00</p>
			<p class="op3">规格:<span class="op3-a">【14cm*7cm-酸奶提子】【14cm*7cm-柚子奇异果口味】【20cm*7cm-酸奶提子】【20cm*7cm-柚子奇异果口味】【12cm*7cm+20cm*7cm-酸奶提子】</span></p>
		</div>
		<!-- 页面固定图 -->
		<div class="gd-img">
			<img src="image/1597800665117020.jpg">
			<img src="image/1597799850368438.jpg">
			<img src="image/1597799857737865.jpg">
			<img src="image/1597799875611051.jpg">
		</div>
		<!-- 加入购物车固定块 -->
		<div class="gwc-gd">
			<a class="gwc-gd1" id="gwcgd1">加入购物车</a>
			<a class="gwc-gd2" id="gwcgd2">立即购买</a>
		</div>
		<!-- 点击显示页面 -->
		<div class="YC" id="YC">
			<div class="YC-one">
				<img src="image/small.jpg" class="YC-img">
				<h4>朵朵情歌</h4>
				<p class="YC-p">￥199.00</p>
				<span class="YC-x" id="ycx">×</span>
			</div>
			<div class="YC-two">
				<h3>规格:</h3>
				<p class="YC-p1">14cm*7cm-酸奶提子</p>
				<p class="YC-p2">14cm*7cm-柚子奇异果口味</p>
				<p class="YC-p3">20cm*7cm-酸奶提子</p>
				<p class="YC-p4">20cm*7cm-柚子奇异果口味</p>
				<p class="YC-p5">12cm*7cm+20cm*7cm-酸奶提子</p>
				<p class="YC-p6">12cm*7cm+20cm*7cm-柚子奇异果口味</p>
			</div>
			<div class="YC-three">
				<h3>数量:</h3>
				<div class="YC-shuliang">
					<span onclick="shuliang(this)" style="cursor:pointer;border-right:1px solid #ccc" class="YC-jian">-</span>
					<input type="text" name="slnum" id="slnum" value="1" />
					<span onclick="shuliang(this)" style="cursor:pointer;border-left:1px solid #ccc" class="YC-jia">+</span>
				</div>
			</div>
			<div class="YC-four">
				<div class="YC-canju">
					餐具:
					<div>
						<select class="canju">
							<option value="">请选择上方规格</option>
						</select>
						<select class="mfcanju">
							<option value="2人份">2人份</option>
							<option>不要餐具</option>
							<option>3人份</option>
							<option>4人份</option>
							<option>5人份</option>
							<option>6人份</option>
							<option>7人份</option>
							<option>8人份</option>
							<option>9人份</option>
							<option>10人份</option>
							<option>11人份</option>
							<option>12人份</option>
							<option>13人份</option>
							<option>14人份</option>
							<option>15人份</option>
							<option>16人份</option>
							<option>17人份</option>
							<option>18人份</option>
						</select>
					</div>

				</div>
			</div>
			<button type="button" class="YC-btn" id="ycbtn">下一步</button>
			<div class="YC-dj" id="ycdj">
				<div class="YC-dj1">
					<span class="dj1-s1">✔</span>
					<span class="dj1-s2">添加成功</span>
					<span id="dj1-s3">×</span>
				</div>
				<div class="YC-dj2">
					<a href="shopping.html" id="ycdj1">去购物车结算</a>
					<a href="Holiland.html" id="ycdj2">再逛逛</a>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footer-one"><a href="Holiland.html">主页</a></div>
			<div class="footer-two">
				<a class="footer-two1" id="footertwo1">产品</a>
				<ol class="footer-two2" id="footertwo2">
					<a href="XPXLcake.html">
						<li>新品系列</li>
					</a>
					<a href="Children.html">
						<li>儿童系列</li>
					</a>
					<a href="ZAXLcake.html">
						<li>珍爱系列</li>
					</a>
					<a href="Zunaicake.html">
						<li>尊爱系列</li>
					</a>
					<a href="HFQDcake.html">
						<li>和风钦点</li>
					</a>
				</ol>
			</div>
			<div class="footer-three"><a href="HFQDcake.html">和风钦点</a></div>
			<div class="footer-four">
				<a id="footerhelp">帮助中心</a>
				<ol class="footer-four1" id="footerfour1">
					<a href="login.html">
						<li>会员中心</li>
					</a>
					<a href="Stores.html">
						<li>门店列表</li>
					</a>
					<a href="Stores.html">
						<li>好利来招聘</li>
					</a>
				</ol>
			</div>
		</div>
	</body>
</html>
<script src="jQuery.js"></script>
<script>
	//点击边框变色
	$("p").click(function() {
		$(this).css({
			border: "1px solid red"
		})
	})
	let i = 0;
	$("li").eq(0).css({
		background: "red"
	});
	$("#btn2").click(function() {
		if (i < 1) {
			i++;
		} else {
			i = 0;
		}
		$("#Img").css({
			background: "url(image/" + i + ".jpg) no-repeat",
			backgroundSize: "500px 500px"
		});
		$("li").css({
			background: "white"
		});
		$("li").eq(i).css({
			background: "red"
		});
	})
	$("#btn1").click(function() {
		if (i > 0) {
			i--;
		} else {
			i = 1;
		}
		$("#Img").css({
			background: "url(image/" + i + ".jpg) no-repeat",
			backgroundSize: "500px 500px"
		});
		$("li").css({
			background: "white"
		});
		$("li").eq(i).css({
			background: "red"
		});
	})
</script>
<script src="magnifier.js"></script>
<script>
	let oImg = document.querySelector("#Img");
	let oMask = document.querySelector("#mask");
	let oBigBox = document.querySelector("#big-box");

	let m = new Mask(oImg, oMask, oBigBox);

	m.onmouseover();
	m.onmouseout();
	m.onmousemove();
</script>
<script>
	//弹出YC框
	var oGwcgd1 = document.getElementById("gwcgd1");
	var oGwcgd2 = document.getElementById("gwcgd2");
	var oYC = document.getElementById("YC");
	oGwcgd1.onclick = function() {
		oYC.style.display = "block";
	}
	oGwcgd2.onclick = function() {
		oYC.style.display = "block";
	}
	//点击X关闭YC框
	var oYcx = document.getElementById("ycx");
	var oYC = document.getElementById("YC");
	oYcx.onclick = function() {
		oYC.style.display = "none";
	}

	//数量加减
	function shuliang(ob) {
		var opera = ob.innerHTML;
		if (opera == '+') {
			var input = ob.previousSibling.previousSibling;
			input.value = parseInt(input.value) + 1;
		} else if (opera == '-') {
			var input = ob.nextSibling.nextSibling;
			input.value = parseInt(input.value) - 1;
			if (input.value < 1) {
				input.value = 1;
			}
		}
	}


	//点击下一步YC-dj框显示
	var oYcdj = document.getElementById("ycdj");
	var oYcbtn = document.getElementById("ycbtn");
	oYcbtn.onclick = function() {
		oYcdj.style.display = "block";
	}
	oYcdj.onclick = function() {
		oYcdj.style.display = "none";
	}
</script>
<script>
	let oA = document.getElementById("footertwo1");
	let oOl = document.getElementById("footertwo2");
	let oB = document.getElementById("footerhelp");
	let oOli = document.getElementById("footerfour1");
	oA.onclick = function() {
		if (oOl.style.display == "none") {
			oOl.style.display = "block";
		} else {
			oOl.style.display = "none";
		};
	};
	oB.onclick = function() {
		if (oOli.style.display == "none") {
			oOli.style.display = "block";
		} else {
			oOli.style.display = "none";
		};
	};
</script>
